<script setup lang="ts">
import pagenum from "@/components/common/pagenum.vue";

type Props = {
  isDialog?: boolean;
};
let props = withDefaults(defineProps<Props>(), {
  isDialog: false,
});
const emits = defineEmits<{
  (e: "update:isDialog", value: boolean): never;
}>();

let headersList = {
  name: "投诉者类型",
  type: "投诉类型",
  title: "投诉标题",
  state: "受理状态",
  time: "投诉时间",
  operation: "操作",
};
let list = [
  {
    name: "企业",
    type: "融资问题",
    title: "关于广西中小企业的问题",
    state: 0,
    time: "2022-10-27 12:00",
  },
  {
    name: "个人",
    type: "项目用地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 1,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "项目用地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 2,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 3,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 3,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 2,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 0,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 0,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 0,
    time: "2022-10-27 12:00",
  },
  {
    name: "企业",
    type: "生产本地问题",
    title: "最多显示十六个字符符最多显示十…",
    state: 0,
    time: "2022-10-27 12:00",
  },
];
</script>

<template>
  <div class="record">
    <!-- 这层div用于滚动条的 -->
    <div class="headers t">
      <div :class="k" v-for="(v, k) of headersList" :key="k">
        {{ v }}
      </div>
    </div>
    <div class="table t" v-for="(v, k) of list" :key="k">
      <div :class="k1" v-for="(v1, k1) of v" :key="k1">
        <span v-if="k1 == 'state'" class="tps" :class="'tps' + v1"></span>
        <template v-else>{{ v1 }}</template>
      </div>
      <div class="operation">
        <a @click="emits('update:isDialog', true)">查看</a>
        <!-- <a>删除</a> -->
      </div>
    </div>
  </div>

  <!-- 页面码数 -->
  <pagenum />
</template>

<style scoped lang="scss">
.record {
  box-sizing: content-box;
  height: 537px;
  overflow: auto;
  border-bottom: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  margin-bottom: 24px;
}

// 表格的数据内容
.t {
  height: 48px;
  display: flex;
  font-size: 14px;
  position: relative;

  > div {
    height: 48px;
    padding-left: 16px;
    @include flexCenter;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
  }
}

.headers {
  background-color: #fafafa;
  font-weight: 600;
  color: #333333;
  > div {
    background-color: #fafafa;
    &:last-of-type {
      padding-left: 16px !important;
    }
  }
}
.table {
  font-size: 14px;
  font-weight: 400;
  color: #606266;
}
.name {
  flex: 0 0 100px;
}
.type {
  flex: 0 0 130px;
}
.title {
  flex: 0 0 277px;
}
.state {
  flex: 0 0 90px;
}
.time {
  flex: 0 0 160px;
}
.operation {
  flex: 0 0 104px;
  justify-content: space-between;
  position: sticky;
  right: 0;
  background-color: #fafafa;
  box-shadow: -6px 0px 6px 0px rgba(0, 0, 0, 0.05);
  padding: 0px !important;
  text-align: center;
  > a {
    flex: 1;
    height: 100%;
    position: relative;
    z-index: 2;
    color: #2163e0;
    background-color: #fff;
    @include flexCenterCenter;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }
}

// 各种小状态
.tps {
  width: 52px;
  height: 22px;
  border-radius: 2px;
  @include flexCenterCenter;
  &::before {
    font-size: 12px;
  }
}
.tps0 {
  color: #ff9d00;
  background-color: #fff7e6;
  border: 1px solid #ffd591;
  &::before {
    content: "受理中";
  }
}
.tps1 {
  color: #52c41a;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  &::before {
    content: "已完成";
  }
}

.tps2 {
  color: #909399;
  background-color: #f0f2f5;
  border: 1px solid #dcdfe6;
  &::before {
    content: "未受理";
  }
}

.tps3 {
  color: #ff4d4f;
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  &::before {
    content: "已拒绝";
  }
}
</style>
